<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Jquery：チェックボックスによる切替サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.changing').click(function(){
	$("#" + this.value).toggle();
	});
});
</script>
</head>
<body>
<h4>Jquery：チェックボックスによる切替サンプル</h4>

<ul>
<li><label for="checkone">切替1</label><input type="checkbox" checked="checked" value="hoge" id="checkone" class="changing" /></li>
<li><label for="checktwo">切替2<input type="checkbox" checked="checked" value="hogehoge" id="checktwo" class="changing" /></label></li>
</ul>


<div id="hoge">
<p>表示・非表示1</p>
</div>

<div id="hogehoge">
<p>表示・非表示2</p>
</div>

<p>valueとIDで表示・非表示箇所の指定</p>
</body>
</html>